import React, { Component } from 'react'
// import PubSubJS from 'pubsub-js'
import { withRouter } from "react-router-dom"
import { HeaderWrap } from "../styledCategory/styled"


class Header extends Component {
    state = {
        c_li: "left",
        checked: "分类",
        path: "/"
    }

    handleClick = c_li => {
        return () => {
            if (c_li === "left") {
                console.log(this.props)
                this.props.history.push("/category")
                this.setState({c_li: c_li, checked: "分类", path: "/category"})
            } else {
                this.props.history.push("/material")
                this.setState({c_li: c_li, checked: "食材", path: "/material"})
            }
        }
    }

    // shouldComponentUpdate(_, nextState) {
    //     if (this.state.checked !== nextState.checked) {
    //         PubSubJS.publish("checked", {checked: nextState.checked})
    //         return true
    //     } else {
    //         return false
    //     }
    // }

    render() { 
        return (
            <HeaderWrap>
                <ul>
                    <li className={this.state.c_li === "left" ? "active" : ""} onClick={this.handleClick("left")}>分类</li>
                    <li className={this.state.c_li === "right" ? "active" : ""} onClick={this.handleClick("right")}>食材</li>
                    <li className={`slider  ${this.state.c_li === "right" ? "right" : ""}`}></li>
                </ul>
            </HeaderWrap>
        )
    }
}

export default withRouter(Header)
